<!doctype html>
<html>
  <head>
    <title>瀑布流布局</title>
    <style>
      .waterfall-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .waterfall-item {
        width: calc(50% - 10px); /* 每行显示两张图片，考虑间距 */
        margin-bottom: 10px;
        cursor: pointer;
      }
      .waterfall-item img {
        width: 100%;
      }
      .modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
      }
      .modal img {
        max-height: 90vh;
        max-width: 90vw;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="waterfall-container">
        <div
          v-for="(image, index) in images"
          :key="index"
          class="waterfall-item"
          @click="openModal(index)"
        >
          <img :src="image.url" alt="Image" />
        </div>
      </div>
      <div v-if="isModalOpen" class="modal" @click="closeModal">
        <img :src="images[modalIndex].url" alt="Image" />
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          images: [
            { url: "image1.jpg" },
            { url: "image2.jpg" },
            { url: "image3.jpg" },
            { url: "image4.jpg" },
            { url: "image5.jpg" },
            { url: "image6.jpg" },
            // 添加更多图片...
          ],
          isModalOpen: false,
          modalIndex: 0,
        },
        methods: {
          openModal(index) {
            this.isModalOpen = true;
            this.modalIndex = index;
          },
          closeModal() {
            this.isModalOpen = false;
          },
        },
      });
    </script>
  </body>
</html>
